<template>
  <div>
    <div class="title-data">数据概览</div>
    <div class="tit-data">欢迎回来，这是您的实时数据概览</div>
    <!-- 第一个卡片 职位选择 -->
    <el-card style="max-width: 100%;margin-bottom: 20px;">
      <div class="filter-container">
        <div class="filter-item">
          <label for="position">职位</label>
          <select id="position">
            <option value="all">所有职位</option>
            <!-- 可根据实际需求添加更多职位选项 -->
            <option value="engineer">工程师</option>
            <option value="manager">经理</option>
          </select>
        </div>
        <div class="filter-item">
          <label for="time-range">时间范围</label>
          <select id="time-range">
            <option value="this-month">本月</option>
            <!-- 可根据实际需求添加更多时间范围选项 -->
            <option value="last-month">上月</option>
            <option value="this-year">本年</option>
          </select>
        </div>
      </div>
    </el-card>

    <!-- 第二个卡片 最近面试 -->
    <el-card style="max-width: 100%">
      <template #header>
        <div class="card-header">
          <span>最近面试</span>
        </div>
      </template>
      <el-table style="width: 100%;color: #000;">
        <el-table-column fixed prop="date" label="候选人" width="120" />
        <el-table-column prop="name" label="应聘职位" width="150" />
        <el-table-column prop="state" label="面试官" width="120" />
        <el-table-column prop="city" label="日期" width="120" />
        <el-table-column prop="address" label="时长" width="120" />
        <el-table-column prop="address" label="状态" width="120" />
        <el-table-column prop="address" label="结果" width="120" />
        <el-table-column prop="address" label="得分" width="120" />
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default>
            <el-button link type="primary" size="small" @click="handleClick">
              Detail
            </el-button>
            <el-button link type="primary" size="small">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <!-- <pagetion></pagetion> -->
    <!-- 111 -->
  </div>

</template>
<script lang='ts' setup>
import pagetion from '@/components/pageTintain.vue'
const handleClick = () => {
  console.log('click')
}


</script>
<style lang="scss">
.title-data {
  font-size: 24px;
  margin-bottom: 10px;
}

.tit-data {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 20px;
}

.filter-container {
  display: flex;
  gap: 20px;
}

.filter-item {
  display: flex;
  margin-right: 100px;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-size: 14px;
}

select {
  width: 90px;
  height: 28px;
  font-size: 14px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
</style>
